<template>
	<div class="hot">
		<div class="hot-top">
			<span class="iconfont fire">&#xe6e7;</span>
			<label class="hot-til">本周热门榜单</label>
			<label style="float: right;">
				全部榜单
				<span class="iconfont">&#xe637;</span>
			</label>0
		</div>
		<ul class="hot-list">
			<li class="hot-item" v-for="(item,index) in hotkk" :key="index">
				<img  :src="item.hotURL" />
				<p>{{item.hotTil}}</p>
				<p>
					<span>￥{{item.price}}</span>起
				</p>
			</li>
		</ul>
	</div>
</template>

<script>
	import Swiper from 'swiper';
	export default {
		props:['hotkk'],
		data() {
			return {
				// hotkk: [

				// 	{
				// 		id: 1,
				// 		hotURL: require('@/assets/img/hot01.jpg'),
				// 		hotTil: '长隆野生动物世界',
				// 		price: '250'
				// 	},
				// 	{
				// 		id: 2,
				// 		hotURL: require('@/assets/img/hot02.jpg'),
				// 		hotTil: '长隆欢乐世界',
				// 		price: '210.9'
				// 	},
				// 	{
				// 		id: 3,
				// 		hotURL: require('@/assets/img/hot03.jpg'),
				// 		hotTil: '广州塔',
				// 		price: '125'
				// 	},
				// 	{
				// 		id: 4,
				// 		hotURL: require('@/assets/img/hot04.jpg'),
				// 		hotTil: '海珠国家湿地2公园',
				// 		price: '19'
				// 	},
				// 	{
				// 		id: 5,
				// 		hotURL: require('@/assets/img/hot05.jpg'),
				// 		hotTil: '长隆国际大马戏剧院',
				// 		price: '297.6'
				// 	},
				// 	{
				// 		id: 6,
				// 		hotURL: require('@/assets/img/hot06.jpg'),
				// 		hotTil: '珠江夜游',
				// 		price: '68'
				// 	},
				// 	{
				// 		id: 7,
				// 		hotURL: require('@/assets/img/hot07.jpg'),
				// 		hotTil: '天适樱花游乐园',
				// 		price: '250'
				// 	},
				// 	{
				// 		id: 8,
				// 		hotURL: require('@/assets/img/hot08.jpg'),
				// 		hotTil: '广州长隆旅游度假区',
				// 		price: '84.3'
				// 	},
				// 	{
				// 		id: 9,
				// 		hotURL: require('@/assets/img/hot09.jpg'),
				// 		hotTil: '广州融雪世界',
				// 		price: '104'
				// 	},
				// 	{
				// 		id: 10,
				// 		hotURL: require('@/assets/img/hot10.jpg'),
				// 		hotTil: '广州正佳极地海洋世界',
				// 		price: '115'
				// 	},
				// ]
			}
		},
		mounted() {
			new Swiper ('.header-hot',{
				//循环滑动
				loop:true,
				observer:true,
				observeParent:true
			})
		}
	}
</script>

<style scoped>
	.hot {
		width: 100%;
		margin-top: 0.4rem;
		background-color: white;
		font-size: 0.28rem;
	}

	.hot-top {
		position: relative;
		padding: 0.2rem;
	}

	.fire {
		color: #ff4500 !important;
		font-size: 0.48rem;
		margin-right: 0.1rem;
	}

	.hot-til {
		color: #212121;
		font-weight: bold;
		font-size: 0.4rem;
	}

	.hot-all {
		display: inline-block;
		float: right;
		padding-top: 0.1rem;
		color: #616161;
	}

	.hot-list {
		margin-top: 0.2rem;
		padding-bottom:0.4rem;
		/* 横向溢出滚动 */
		overflow-x:scroll;
		/* 纵向溢出滚动 */
		overflow-y:hidden;
		white-space:nowrap;
	}

	.hot-item {
		width: 2rem;
		height: 2rem;
		padding: 0.2rem;
		/*将li标签转出行内块*/
		display: inline-block;
	}

	.hot-item img {
		width: 100%;
		height: 100%;
	}
	.hot-item  p{
		text-align: center;
		margin-top: 0.1rem;
		overflow: hidden;
		white-space:nowrap ;    /*禁止内容换行*/
		text-overflow: ellipsis;  /*超出的内容以省略号形式覆盖*/
	}
</style>
